<template>
  <div>
    <button @click="addNum(10)">+</button>
    {{ $store.state.num }}
    <br>
    两倍
    {{ $store.getters.doubleNum }}
    <button @click="reduceNum(5)">-</button>
    <hr>
    <ul>
      <li v-for="item in $store.state.items" :key="item">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    addNum (n) {
      this.$store.commit('ADD_NUM', n)
    },
    reduceNum (n) {
      this.$store.commit('REDUCE_NUM', n)
    }
  },
  created () {
    this.$store.dispatch('FETCH_ITEMS')
    console.log(this.$store)
  }
}
</script>

<style lang="scss" scoped>

</style>
